<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>

    <title>浙江日报报卡订阅</title>
    <link href="/Public/zjdailyCard/css/bkmain.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="/Public/js/zjdailyCard/respond.js"></script>
</head>

<body class="addressBg">
<!----------------------------------->
<div class="uploadregstFail borderRadius" id="activeCardTip">
    <p class="pFail"><span class="icon iconfont icon-tanhao"></span><span class="info">订阅成功！</span></p>
</div>
<!-------------注册失败------------------------>
<!-------------登录---------------------->
<div class="mask" style="display:block"></div>
<!-------------登录失败------------------------>
<div class="bannerTop" style=" position:relative">
    <img src="/Public/zjdailyCard/images/bannerPhone2019.jpg" width="100%" class="phoneBanner">
    <img src="/Public/zjdailyCard/images/banner2019.jpg" class="bannerImage"><!--
<p id="homeCardBtn" class="pMycard">查看我的报卡</p>
<p id="onlineCheckBtn" display="hidden"></p>-->
</div>
<div class="main">
    <form>
        <ul class="ulAddress">
            <li>
                <span class="iconfont icon icon-gezicopt"></span>

                <div class="spanAddress">
                    <span class="red boxSize">*</span>
                    <input placeholder="卡号" type="text" class="uploadTxt" name="cardno" id="cardno"
                           data-validate="requireNotNull">

                    <div class="tipinfo">
                        <div class="error icon iconfont icon-iconfontgantanhao"></div>
                        <div class="valid icon iconfont icon-gou"></div>
                    </div>
                </div>
            </li>
            <li>
                <span class="iconfont icon icon-yaochiNF"></span>

                <div class="spanAddress">
                    <span class="red boxSize">*</span>
                    <input placeholder="密码不少于6位" type="password" class="uploadTxt" id="password" name="password"
                           data-validate="requireLength" data-min="6">

                    <div class="tipinfo">
                        <div class="error icon iconfont icon-iconfontgantanhao"></div>
                        <div class="valid icon iconfont icon-gou"></div>
                    </div>
                </div>
            </li>
            <!-------------图形验证码20161018------------------------>
            <li>
                <span class="iconfont icon icon-edit"></span>

                <div class="spanAddress">
                    <span class="red boxSize">*</span>
                    <input placeholder="图形验证码" type="text" class="uploadTxt" id="verify_code" name="verify_code"
                           data-validate="requireLength" data-min="6">
                    <img src="/Wap/zJDailyCard/verifyCode" onclick="change_verifyCode(this);" class="validateImage">
                </div>
            </li>
            <!-------------图形验证码20161018------------------------->
        </ul>
    </form>

    <div class="intro"><span class="iconfont icon icon-icoyuan"></span>请保留好您的订阅卡，相关问题可进入“浙江日报发行服务”微信公众账号进行咨询投诉</div>
    <div class="intro"><span class="iconfont icon icon-icoyuan"></span>带“*”部分为必填内容，请完整填写</div>
    <div class="btn btnStyle1">
        <input type="button" value="下一步" id="activeCardBtn" class="sumiBtn gray borderRadius activate"/>
    </div>
    <div class="divfooter mart100">
        <p>浙报新媒体技术支持</p>

        <p class="pFooter">浙江日报新闻发展有限公司 | Copyright © 2019 - 2020</p>
    </div>
</div>

<!--------------20161107用户须知--------------------->
<div class="noticeBox borderRadius" style="display:block">
    <h1>用户须知</h1>
    <p>1.本卡订阅前请仔细阅读使用须知。<br/>
        2.本卡订阅地址仅限浙江省内。<br/>
        3.请务必填写真实有效的手机号码，否则将因个人信息有误而无法查询、改址。<br/>
        4.本卡订阅成功后订报信息无法修改，请务必仔细核对确认无误后再点击“订阅”按钮。<br/>
        5.2019年12月20日至12月31日期间订阅的用户，报纸将于2020年1月15日起投递；2020年1月1日以后订阅的用户，报纸将于次月1日起投递。<br/>
    </p>
    <div class="buttonUser" id="ready">已阅读，同意<span id="time">(<span id="second">10</span>s)</span></div>
</div>
<!--------------20161107用户须知--------------------->
<script type="text/javascript" src="/Public/zjdailyCard/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Public/js/zjdailyCard/jquery.JPlaceholder.js"></script>
<script type="text/javascript" src="/Public/zjdailyCard/js/validateadd.js"></script>
<script type="text/javascript" src="/Public/zjdailyCard/js/bkmain.js"></script>
<script type="text/javascript" src="/Public/zjdailyCard/js/offline.china.js"></script>
<script type="text/javascript">
    var editCardData = function () {
        var _data = {};
        $("input").each(function () {
            _data[$(this).attr('name')] = $(this).val();
        });
        $("select").each(function () {
            _data[$(this).attr('name')] = $(this).val();
        });
        $("textarea").each(function () {
            _data[$(this).attr('name')] = $(this).val();
        });
        return _data;
    }
    var activeCard = function () {
        var _data = editCardData();
        $.ajax({
            url: "{:U('Wap/ZJDailyCard/active')}",
            type: "POST",
            data: _data,
            success: function (result) {
                ( result.err == 200 ) && $("#activeCardTip").find("span.info").html("订阅成功");
                ( result.err != 200 ) && $("#activeCardTip").find("span.info").html(result.msg);
                $("#activeCardTip").show();
                setTimeout(function () {
                    $("#activeCardTip").hide();
                    ( result.err == 200 ) && ( window.location.href = "{:U( 'Wap/ZJDailyCard/home' )}");
                }, 800);
            },
            error: function () {
            }
        });
    }

</script>
<script type="text/javascript">
    var miniCity = (function () {
        var _provience = undefined;
        var _city = undefined;
        var _region = undefined;

        var _changeProvience = function (code) {
            !code && ( code = $(this).val() );
            var options = undefined;
            if (code > 0) {
                options = "<option value=0>请选择</option>";
                for (var i in offline.china.cities[code]) {
                    options += "<option value=" + i + ">" + offline.china.cities[code][i] + "</option>";
                }
                _city.html("");
                _city.append($(options)).trigger("change");
            }
            ;
            /*(code > 0) && $.get( '/?m=user&c=miniCity&a=check', { code: code }, function(result){
             options = "<option value=0>请选择</option>";
             for( var i in result.sons ){
             options += "<option value="+result.sons[i].id+">"+result.sons[i].regionname + "</option>";
             }
             //_provience.html( "" );
             _city.html("");
             //_provience.append( $( "<option value="+result.parent.id+">" + result.parent.regionname + "</option>") );
             _city.append( $(options) ).trigger( "change" );
             });*/
            (code == 0) && _city.html("<option value=0>请选择</option>").trigger("change");
        };
        var _changeCity = function (code, region) {
            !code && ( code = $(this).val() );
            if (code > 0) {
                options = "<option value=0>请选择</option>";
                for (var i in offline.china.counties[code]) {
                    options += "<option value=" + i + ">" + offline.china.counties[code][i] + "</option>";
                }
                _region.html("");
                _city.find("option[value=" + code + "]").attr('selected', true);
                _region.append($(options));
                region && _region.find("option[value=" + region + "]").attr("selected", true).trigger("change");
                region == undefined && _region.trigger("change");
            }
            /*( code > 0 ) && $.get( '/?m=user&c=miniCity&a=check', { code: code }, function(result){
             options = "<option value=0>请选择</option>";
             for( var i in result.sons ){
             options += "<option value="+result.sons[i].id+">"+result.sons[i].regionname + "</option>";
             }
             _region.html("");
             _city.find( "option[value=" + code + "]" ).attr( 'selected', true );
             //_city.find( "option[value=" + code + "]" ).prop( 'selected', true );
             _region.append( $(options) );
             region && _region.find( "option[value=" + region + "]" ).attr( "selected", true ).trigger( "change" );
             region == undefined && _region.trigger( "change" );
             });*/
            ( code == 0 ) && _region.html("<option value=0>请选择</option>").trigger("change");
        };
        var changeRegion = function (code) {
        };

        var _initProvience = function (code, selected) {
            /*$.post( '/?m=user&c=miniCity&a=checks', {codes: code}, function( result ){
             var options = "<option value=0>请选择</option>";
             for( var i in result ){
             options += "<option value=" + result[i].id + ">" + result[i].regionname + "</option>"
             }
             _provience.html( "" );
             _provience.html( options );
             _provience.find( "option[value="+selected+"]" ).attr( "selected", true );
             });*/
            var options = "<option value=0>请选择</option>";
            for (var i in code) {
                options += "<option value=" + code[i] + ">" + offline.china.provinces[code[i]] + "</option>"
            }
            _provience.html("");
            _provience.html(options);
            _provience.find("option[value=" + selected + "]").attr("selected", true);

        }
        return {
            init: function (s_provience, s_city, s_region, provience, city, region) {
                _provience = $(s_provience);
                _city = $(s_city);
                _region = $(s_region);
                //_initProvience( [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35], provience );
                _initProvience([31], provience);
                provience && _changeProvience(provience);
                city && _changeCity(city, region);

                _provience.bind("change", function () {
                    _changeProvience($(this).val());
                });
                _city.bind("change", function () {
                    _changeCity($(this).val());
                });
            },
            //changeCity: _changeCity
        }
    })();
    $(document).ready(function () {
        setTimeout(function () {
            var default_province = $("#province").data("default");
            var default_city = $("#city").data("default");
            var default_region = $("#region").data("default");
            //miniCity.init( ".provience", ".city", ".region", $("#province").data("default"), $("#city").data("default"), $("#region").data("default") );
            //miniCity.init( ".provience", ".city", ".region", $("#province").data("default"), $("#city").data("default"), $("#region").data("default") );
            miniCity.init(".provience", ".city", ".region", "{$bag['data_card']['province']}", "{$bag['data_card']['city']}", "{$bag['data_card']['county']}");
        }, 1);
    });
    //miniCity.init( ".provience", ".city", ".region", $("#province").data("default"), $("#city").data("default"), $("#region").data("default") );
</script>
<script type="text/javascript">
    $(document).keydown(function (event) {
        event.keyCode == 13 && event.preventDefault();
        //$( ".divfooter>p:first" ).html( event.keyCode );
    });
</script>
<script type="text/javascript">
    window.setInterval("run();", 1000);
    function run(){
        var s = document.getElementById("second");
        if(s.innerHTML == 0){
            document.getElementById("time").style.display = "none";
            $("#ready").addClass("buttonreader");
            $(".buttonreader").click(function(){
                $(".noticeBox").css("display","none");
                $(".mask").css("display","none");
            })
            return false;
        }
        s.innerHTML = s.innerHTML * 1 - 1;
    }
    function change_verifyCode(obj) {
        var key = Math.ceil(Math.random() * 10000);
        $(obj).attr('src', '/wap/zJDailyCard/verifyCode?key=' + key);
    }
    $("#verify_code").keypress(function () {
        $("#activeCardBtn").removeClass('gray');
        $("#activeCardBtn").attr('disabled', false);
    });
    $("#activeCardBtn").click(function () {
        var data = $("form").serialize();
        $.ajax({
            type: 'post',
            data: data,
            dataType: 'json',
            url: '/wap/ZJDailyCard/checkCard',
            success: function (res) {
                if (res.code == 1) {
                    window.location = '/wap/ZJDailyCard/next?cardId=' + res.msg;
                } else {
                    alert(res.msg);
                }
            }
        });
    });
</script>
</body>
</html>
